import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_magic_planet/common/constant.dart';
import 'package:flutter_magic_planet/component/autostereoscopy_widget.dart';
import 'package:get/get.dart';

import 'search_logic.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final SearchLogic logic = Get.put(SearchLogic());
  double height = 200;
  final FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        focusNode.unfocus();
      },
      child: Stack(
        children: [
          _buildBanner(),
          Column(
            children: [
              Expanded(
                flex: 3,
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0, 180, 0, 0),
                  child: Container(
                    width: double.infinity,
                    height: 100,
                    decoration: BoxDecoration(
                      color: Color(0xFFEEEEEE),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(25),
                        topRight: Radius.circular(25),
                      ),
                    ),
                    child: Padding(
                      padding: EdgeInsets.fromLTRB(0, 25, 0, 0),
                      child: SingleChildScrollView(
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            _buildLogo(),
                            SizedBox(height: 12),
                            _buildTextField(),
                            SizedBox(height: 24),
                            _buildRadioList(),
                            SizedBox(height: 24),
                            _buildButton(),
                            SizedBox(height: 24),
                            _buildTip(),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<SearchLogic>();
    focusNode.dispose();
    super.dispose();
  }

  _buildBanner() {
    return AutostereoscopyWidget(
      width: MediaQuery.of(context).size.width,
      height: height,
      maxAngleY: 30,
      maxAngleX: 40,
      middleScale: 1,
      foregroundScale: 1.1,
      backgroundScale: 1.3,
      backgroundWidget: Container(
        child: getImage('back.png'),
      ),
      middleWidget: Container(
        child: getImage('mid.png'),
      ),
      foregroundWidget: Container(
        child: getImage('fore.png'),
      ),
    );
  }

  Image getImage(String s) {
    return Image.asset(
      "assets/images/banner/$s",
      width: MediaQuery.of(context).size.width,
      height: height,
      fit: BoxFit.fill,
      scale: 3.0,
    );
  }

  _buildLogo() {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 0, 12),
      child: Image.asset(
        'assets/images/planet.png',
        color: Colors.black,
        width: 100,
        fit: BoxFit.cover,
      ),
    );
  }

  _buildDropDown() {
    return Obx(
      () => DropdownButton(
        underline: Container(),
        value: logic.dropValue.value,
        items: logic.dropItems.keys
            .map(
              (e) => DropdownMenuItem(
                child: Text(e),
                value: logic.dropItems[e],
              ),
            )
            .toList(),
        onChanged: (String? value) {
          logic.setDropSelected(value!);
        },
      ),
    );
  }

  _buildTextField() {
    return Container(
      width: 300,
      height: 50,
      decoration: BoxDecoration(
        color: Color(0xFFE0E0E0),
        borderRadius: BorderRadius.circular(25),
      ),
      child: Padding(
        padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
        child: Row(
          children: [
            _buildDropDown(),
            SizedBox(width: 6),
            Expanded(
              child: TextFormField(
                controller: logic.textController,
                focusNode: focusNode,
                obscureText: false,
                decoration: InputDecoration(
                  hintText: '输入关键字',
                  hintStyle: TextStyle(
                    color: Color(0x7F455A64),
                    fontWeight: FontWeight.normal,
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                      color: Color(0x00000000),
                      width: 1,
                    ),
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(4.0),
                      topRight: Radius.circular(4.0),
                    ),
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                      color: Color(0x00000000),
                      width: 1,
                    ),
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(4.0),
                      topRight: Radius.circular(4.0),
                    ),
                  ),
                ),
                style: TextStyle(
                  color: Color(0xFF455A64),
                  fontWeight: FontWeight.normal,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _buildRadioList() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 26),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: logic.searchUnits.map((e) {
          int index = logic.searchUnits.indexOf(e);
          return GestureDetector(
            onTap: () {
              logic.setSearchUnitSelected(index);
            },
            child: Obx(
              () => Container(
                padding: EdgeInsets.symmetric(horizontal: 22, vertical: 12),
                decoration: BoxDecoration(
                  color: index == logic.searchUnitIndex.value
                      ? primaryColor
                      : Colors.white,
                  borderRadius: BorderRadius.circular(6),
                ),
                child: Text(e),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  _buildButton() {
    return Container(
      width: 300,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(25),
      ),
      child: GestureDetector(
        child: Container(
          width: Get.width,
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(vertical: 12),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(25),
            color: Colors.black,
          ),
          child: Text(
            '搜一下',
            style: TextStyle(
              color: Color(0xFFDEDEDE),
              fontSize: 16,
            ),
          ),
        ),
        onTap: () async {
          String key = logic.textController.text;
          if (TextUtil.isEmpty(key)) {
            return;
          }
          logic.searchToPage(
            query: logic.textController.text,
            option: logic.dropValue.value,
          );
        },
      ),
    );
  }

  _buildTip() {
    return InkWell(
      onTap: () async {
        // Get.toNamed('${RouteConfig.comicPlayer}/11595866');
      },
      child: Text(
        '需要反馈？',
        style: TextStyle(
          color: Color(0xFF1F1F1F),
          fontWeight: FontWeight.normal,
        ),
      ),
    );
  }
}
